<template>
  <div id="app">
    <HeadTitle
      :type="0"
      v-if="$route.path != '/account_details' && $route.path != '/members'"
    ></HeadTitle>
    <div
      :class="
        $route.path != '/account_details' && $route.path != '/members'
          ? 'content'
          : ''
      "
    >
      <router-view v-if="!$route.meta.keepAlive" />
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive" />
      </keep-alive>
    </div>
    <van-popup
      v-model="$store.state.showBandPhone"
      :safe-area-inset-bottom="true"
      get-container="body"
      round
      position="bottom"
    >
      <div class="bind-phone">
        <div class="input-box">
          <input type="number" v-model="phone" placeholder="请输入手机号码" />
        </div>
        <div class="code-input flex">
          <div class="input-box">
            <input
              type="number"
              v-model="code"
              @input="input"
              placeholder="请输入验证码"
            />
          </div>
          <div class="get-btn" @click="getCode" :class="isGet ? 'on' : ''">
            {{ isGet ? "已发送" + reciprocal + "秒" : "获取验证码" }}
          </div>
        </div>
        <div class="agreement flex">
          <div class="select-box" @click="isSelect = !isSelect">
            <div class="select" v-show="!isSelect"></div>
            <img
              class="selected"
              src="@/assets/imgs/register_radio_nor.png"
              v-show="isSelect"
              alt=""
            />
          </div>
          <router-link tag="div" to="/user_agreement" class="agreenent-text">
            勾选则代表您同意 <span>《用户协议》</span> 和
            <span>《隐私政策》</span>
          </router-link>
        </div>
        <div class="submit-btn" @click="submit">下一步</div>
      </div>
    </van-popup>
    <van-popup
      v-model="$store.state.isShowAccount"
      :safe-area-inset-bottom="true"
      get-container="body"
      round
      position="bottom"
    >
      <div class="show-pass-word">
        <div class="title">以下是您的“学易知”账号信息</div>
        <div class="show-item"><span>账号：</span>{{ phone }}</div>
        <div class="show-item"><span>密码：</span>{{ passwordShow }}</div>
        <div class="define-btn" @click="$store.state.isShowAccount = false">已知道</div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import validator from "@/utils/validator";
export default {
  data() {
    return {
      showBandPhone: false,
      phone: "",
      code: "",
      isGet: false,
      reciprocal: 60,
      isShowAccount: false,
      passwordShow: "",
      isBind: true,
      setInterval:null,
      isSelect: true,
    };
  },
  methods: {
    input() {
      if (this.code.length > 6) this.code = this.code.slice(0, 6);
    },
    //绑定手机
    submit() {
      if (this.code == "") {
        this.$toast("请输入验证码");
        return;
      }
      if (!this.isSelect) {
        this.$toast("请先同意用户协议");
        return;
      }
      this.$store.state.creatData.code = this.code;
      this.$store.state.creatData.mobile = this.phone;
      let _self = this;
      this.$Api.bindMobileByCode(this.$store.state.creatData).then((res) => {
        if (res.code == 1) {
          _self.$toast.success("登录成功");
          _self.$store.commit("sessionId", res.data.sessionId);
          _self.checkVipOrder();
          _self.getAccountUserInfo()
          _self.$store.commit("showBandPhone", false);
          _self.$store.commit("isShowAccount", true);
          _self.$store.commit("isBind", true);
          _self.phone = _self.phone.replace(/(.{3}).*(.{4})/, "$1****$2");
        } else {
          _self.$toast(res.desc);
        }
      });
    },
    //获取验证码
    getCode() {
      if (!this.isGet) {
        if (!validator.phone(this.phone)) {
          this.$toast("请输入正确的手机号");
          return;
        }
        this.isGet = true;
        this.setInterval = setInterval(this.countDown, 1000);
        this.getVerificationCode();
      }
    },
    //倒计时
    countDown() {
      this.reciprocal -= 1;
      if (this.reciprocal == 0) {
        this.reciprocal = 60;
        clearInterval(this.setInterval);
        this.isGet = false;
      }
    },
    //发送短信
    getVerificationCode() {
      let _self = this;
      this.$Api
        .getVerificationCode({
          key: this.phone,
          type: 1,
        })
        .then((res) => {
          if (res.code == 1) {
            _self.$toast("短信已发送");
          } else {
            _self.$toast(res.msg);
          }
        });
    },
    //获取用户信息
    getAccountUserInfo() {
      let _self = this;
      this.$Api.getAccountUserInfo().then((res) => {
        if (res.code == 1) {
          _self.$store.commit("userInfo", res.data);
          _self.passwordShow = res.data.passwordShow;
        }
      });
    },
    //获取是否vip
    checkVipOrder() {
      let _self = this;
      this.$Api.checkVipOrder().then((res) => {
        if (res.code == 1) {
          _self.$store.commit("isBuy", res.data == 0 ? false : true);
        }
      });
    },
  },
};
</script>

<style>
* {
  padding: 0;
  margin: 0;
  text-decoration: none;
  font-style: none;
  list-style: none;
  box-sizing: border-box;
  font-size: 30px;
}

.show-pass-word {
  width: 100%;
  padding: 42px 36px 38px 36px;
  box-sizing: border-box;
}
.show-pass-word .title {
  font-size: 32px;
  color: #333333;
  line-height: 32px;
  margin-bottom: 78px;
  text-align: center;
  font-weight: bold;
}
.show-pass-word .show-item {
  font-size: 32px;
  color: #333333;
  line-height: 32px;
  margin-bottom: 40px;
}
.show-pass-word .show-item:last-child {
  margin-bottom: 70px;
}
.show-pass-word .show-item span {
  color: #999999;
}
.show-pass-word .define-btn {
  width: 280px;
  height: 88px;
  line-height: 88px;
  border-radius: 44px;
  text-align: center;
  font-size: 30px;
  color: #ffffff;
  background-color: #ff9102;
  margin: 0 auto;
}
.bind-phone {
  width: 100%;
  padding: 94px 34px 38px 34px;
  box-sizing: border-box;
}
.bind-phone .input-box {
  background-color: #f5f5f5;
  border-radius: 10px;
  height: 96px;
  line-height: 96px;
  padding-left: 22px;
}
.bind-phone .input-box input {
  border: none;
  background-color: #f5f5f5;
  font-size: 28px;
  color: #333333;
}
.bind-phone .submit-btn {
  width: 100%;
  height: 88px;
  line-height: 88px;
  text-align: center;
  background-color: #ff9102;
  border-radius: 44px;
  font-size: 30px;
  color: #ffffff;
}
.code-input {
  width: 100%;
  margin-top: 48px;
  margin-bottom: 44px;
}
.code-input .input-box {
  width: 482px;
  margin-right: 14px;
}
.code-input .get-btn {
  width: 186px;
  height: 96px;
  line-height: 96px;
  border-radius: 10px;
  text-align: center;
  font-size: 28px;
  color: #ffffff;
  background-color: #ff9102;
}
.code-input .on {
  background-color: #cccccc;
}

.agreement {
  width: 100%;
  margin-bottom: 70px;
}
.agreement .select-box {
  width: 30px;
  height: 30px;
  margin-right: 16px;
}
.agreement .select-box .select {
  width: 100%;
  height: 100%;
  border: 1px solid #ff9102;
  border-radius: 50%;
}
.agreement .select-box .selected {
  width: 100%;
  height: 100%;
}
.agreement .agreenent-text {
  font-size: 28px;
  color: #999999;
}
.agreement .agreenent-text span {
  color: #ff9102;
}

.content {
  padding-top: 88px;
}

#app {
  margin: 0 auto;
}

img {
  max-width: 100%;
  /* max-height: 100% ; */
}

.flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  -webkit-align-items: center;
  box-align: center;
  -moz-box-align: center;
  -webkit-box-align: center;
}

.flex-start {
  align-items: flex-start;
  -webkit-align-items: flex-start;
  box-align: flex-start;
  -moz-box-align: flex-start;
  -webkit-box-align: flex-start;
}

.flex-end {
  align-items: flex-end;
  -webkit-align-items: flex-end;
  box-align: flex-end;
  -moz-box-align: flex-end;
  -webkit-box-align: flex-end;
}

.flex-center {
  -webkit-justify-content: center;
  justify-content: center;
  -moz-box-pack: center;
  -webkit--moz-box-pack: center;
  box-pack: center;
}

.flex-between {
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -moz-box-pack: space-between;
  -webkit--moz-box-pack: space-between;
  box-pack: space-between;
}

.flex-column {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  flex-direction: column;
  -webkit-flex-direction: column;
}

.flex-wrap {
  -webkit-flex-wrap: wrap;
  -webkit-box-lines: multiple;
  -moz-flex-wrap: wrap;
  flex-wrap: wrap;
}
</style>
